//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
//引入action
import {increment, decrement, incrementAsync} from '../../redux/actions/count'
import React, { Component } from 'react'

  //定义UI组件
  class Count extends Component {

    increment = ()=>{
      const {value} = this.selectNumber;
      this.props.add(parseInt(value));
    }
  
    decrement = ()=>{
      const {value} = this.selectNumber;
      this.props.sub(parseInt(value));
    }
  
    incrementIfOdd = ()=>{
      const {value} = this.selectNumber;
      if(this.props.count % 2 !== 0){
        this.props.add(parseInt(value));
      }
    }
  
    //异步加
    incrementAsync = ()=>{
      const {value} = this.selectNumber;
      this.props.addAsync(parseInt(value),300);
    }
  
    render() {
      return (
        <div>
          <h2>我是count组件</h2>
          <h4>当前总人数为:{this.props.personNumber}</h4>
          <h4>当前求和为:{this.props.count}</h4>
          <select ref={c => this.selectNumber = c}>
              <option value='1'>1</option>
              <option value='2'>2</option>
              <option value='3'>3</option>
          </select>&nbsp;
          <button onClick={this.increment}>+</button>&nbsp;
          <button onClick={this.decrement}>-</button>&nbsp;
          <button onClick={this.incrementIfOdd}>前求和为奇数再加</button>&nbsp;
          <button onClick={this.incrementAsync}>异步加</button>&nbsp;
        </div>
      )
    }
  }

//创建并暴露一个Count的容器组件
//这里绑定redux中的数据和UI properties的数据
export default connect(
    state =>  ({count:state.count, personNumber:state.persons.length}),
    //mapDispatchToProps的简写方式
        {
            add:increment,
            sub:decrement,
            addAsync: incrementAsync,
        }
    )
    (Count)